import React from 'react';
import {List,Button, DatePicker, Tools} from 'weaver-mobile';
import { observer, inject} from 'mobx-react';
import { withRouter } from 'react-router-dom';
const getLabel = Tools.getLabel;

@inject('createStore')
@observer
@withRouter
export default class Remind extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      timestring: '00:00',
      timetext: '',
      userdef: false,
    }
  }
  componentDidMount() {
 
  }
  onclick = (e) => {
    let div = document.getElementsByClassName('hide-content-grid');
    let div2 = document.getElementsByClassName('hide-content-grid-userdefine')[0];
    div2.classList.remove("active");
    if(div){
      for(let i=0; i<div.length; i++) {
        div[i].className = 'hide-content-grid ';
        div[i].selected = false;      
      }
    }
    if(e.target.nodeName === 'DIV'){
      let time = e.target.attributes.time.nodeValue;
      this.setTime(time)
      e.target.className = 'hide-content-grid active';
      e.target.selected = true;
    }else if(e.target.nodeName === 'SPAN') {
      let time = e.target.parentNode.attributes.time.nodeValue;
      e.target.parentNode.className = 'hide-content-grid active';
      e.target.parentNode.selected = true;
      this.setTime(time)
    }
    this.setState({userdef: false})
    return false;
  }

  changeBgcolor = () => {
    let div = document.getElementsByClassName('hide-content-grid');
    let div2 = document.getElementsByClassName('hide-content-grid-userdefine')[0];
    if(div) {
      for(let i=0; i<8; i++) {
        div[i].className = 'hide-content-grid ';
        div[i].selected = false;      
      }
    }
    // div2.style.background = window.getThemeVars()['less']['brand-primary'];
    div2.classList.add("active");
  }

  changeTimeToMinute = (time) => {
    let str = time.split(':');
    if(str.length > 1){
      let num = parseInt(str[0], 10)*60 + parseInt(str[1], 10);
      if(num === 0){
        return getLabel(390083,'正点');
      }else{
        return num;
      }
    }else{ 
      return time;
    }
  }

  userDefine = (data) => {
    let str = data.split(':')
    let hour = parseInt(str[0], 10) === 0 ? '' : parseInt(str[0], 10)+ getLabel(391,"小时");
    let minte = parseInt(str[1], 10) === 0 ? '' : parseInt(str[1], 10)+ getLabel(15049,'分钟');
    str = hour + minte;
    this.setState({userdef: true});
    this.setTime(data);    
  }

  onOk = () => {
    let div = document.getElementsByClassName('hide-content-grid');
    if(div){
      for(let i=0; i<div.length; i++) {
        div[i].className = 'hide-content-grid ';
        div[i].selected = false;
      }
    }
    this.changeBgcolor()
    return false;
  }

  submit = () => {
    this.props.history.go(-1)
    return false;
  }

  setTime = (data) => {
    const { idname, form } = this.props.createStore;
    data = this.changeTimeToMinute(data);
    if(idname === 'starttimebefore') {
      form.updateField('remindTimeBeforeStart',data)
      data === getLabel(19782,'不提醒') ? form.updateField('remindBeforeStart','0') : form.updateField('remindBeforeStart','1')
    }
    if(idname === 'endtimebefore') {
      form.updateField('remindTimeBeforeEnd',data)
      data === getLabel(19782,'不提醒') ? form.updateField('remindBeforeEnd','0') : form.updateField('remindBeforeEnd','1')
    } 
  }
 
  changeTimeTOLabel = (data) => {
    let str = '';
    const change = (data) => {
      let hour = Math.floor(data/60) === 0 ? '00:' : '0'+Math.floor(data/60)+':';
      let minte = data%60 > 9  ? ''+data%60 : data%60 === 0 ? '00' : '0'+data%60;
      str = hour + minte;
      return str;
    }
    if(typeof(data) === 'number'){
      return change(data)
    }else{
      if(parseInt(data,10) >= 0) {
        return change(data)
      }else{
        return data;
      }
    }
  }

  render() {
    const { idname, form } = this.props.createStore;
    let value = form.formParams;
    let curTime = '';
    if(idname === 'starttimebefore'){ curTime = this.changeTimeTOLabel(value['remindTimeBeforeStart'])};
    if(idname === 'endtimebefore'){ curTime = this.changeTimeTOLabel(value['remindTimeBeforeEnd']) };
    let currentState = [];
    let temp = false;
    let classname = '';
    const array = [getLabel(19782,'不提醒'),getLabel(390083,'正点'),'00:05','00:10','00:15','00:20','00:30','01:00',];
    return (
      <div>
        <div className="hide">
          <div className="hide-content">
            {
              array.map((res,index) => {
                currentState[index] = res === curTime;
                temp = temp || currentState[index];
                classname = currentState[index] && !this.state.userdef ?  "hide-content-grid active" : "hide-content-grid";
                let time = res.split(':')
                let label = '';
                let t = parseInt(time[0], 10)*60 + parseInt(time[1], 10)
                let tt = t%60 + parseInt(t/60, 10);
                let T = isNaN(tt) ? time[0] : tt;
                if(!isNaN(t)){
                  label = t>=60 ? getLabel(382424,"小时前") : getLabel(382425,"分钟前"); 
                }
                let Key = T + label;
                let css = label ? 'span-style' : '';
                return <div time={res} selected={false} timetext={Key} key={res} className={classname} onClick={(e) => this.onclick(e)}><span className={css}>{T}</span><br/><span className="time-span" style={{fontSize:12}}>{label}</span></div>
              })
            }
           
            { 
              <div className= {"hide-content-grid"} onClick={(e) => {}}>
                <DatePicker
                  mode="time"
                  onChange={time => this.userDefine(time) }
                  onOk={() => this.onOk()}
                  value={curTime===''||curTime===getLabel(390083,'正点')||curTime===getLabel(19782,'不提醒') ? '00:00': curTime}
                >
                  <List.Item  className={this.state.userdef ? 'hide-content-grid-userdefine active' : (!temp&&curTime!==''?"hide-content-grid-userdefine active":"hide-content-grid-userdefine")}>{getLabel(19516,'自定义')}</List.Item>
                </DatePicker>
              </div>
            }
            
          </div>
            
          <div className="hide-button">
            <Button type="primary" onClick={() => this.submit()}>{getLabel(386788,'确定')}</Button>
          </div>
        </div>
      </div>
    );
  }
}